<template>
	<view class="page-search">
		<uni-search-bar v-model="value" radius="5" placeholder="搜索..." cancelButton="none" focus @confirm="handleConfirm"/>
	</view>
	
	<view class="page-search">
		<uni-list>
			<uni-list-item
			 v-for="item of list"
			  :key="item._id"
			   :title="item.name" :note="item.email"
				show-extra-icon
				 :extra-icon="{color: '#555555',size: '30',type: 'person'}">
				 <template v-slot:footer>
				 	<view class="list-item-footer">
						<button class="append-btn" hover-class="append-btn-hover" @click="appendFriend(item)">加好友</button>
					</view>
				 </template>
				 </uni-list-item>
		</uni-list>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import request from '../../common/request';
	const value = ref('')
	const list = ref([])
	async function findNoFriendUsers() {
		const { code, data } = await request.post('/findNoFriendUsers', { value: value.value })
		if (code) {
			console.log(data)
			list.value = data
		}
	}
	
	const handleConfirm = () => {
		findNoFriendUsers()
	}
	
	const notify = ref([])
	const appendFriend = async (user: {_id: string}) => {
		const { code, data, msg } = await request.post('/appendFriend', { userId: user._id })
		if (code) {
			console.log(data)
			notify.value.push(data)
			uni.showToast({
				title: msg
			})
			request.ws('/appendFriend', { userId: user._id, msg: data })
		}
	}
	
	onMounted(() => {
		
	})
</script>

<style lang="scss">
.list-item-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	.append-btn {
		width: 120rpx;
		border-radius: 8rpx;
		background-color: #f0f2ff;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
		color: #8296FF;
		border: 1rpx solid #8296FF;
		outline: none;
		text-align: center;
		font-weight: bold;
		box-sizing: border-box;
	}
	.append-btn-hover {
		background-color: #8296FF;
		color: #ffffff;
		
	}
}
</style>
